<template>
  <DIV class="bg_write" v-loading="loading">
    <el-col :span="24" class="content_title clearfix">
      <el-col :span="12">
        <HeadTitle></HeadTitle>
      </el-col>
    </el-col>
    <div class="blank"></div>
    <div class="excel_in">
      <!-- <p slot="title"
      style="text-align: left">客户导入向导</p>-->
      <div v-show="one_show">
        <el-row class="relation">
          <el-col :span="12">
            <h1>步骤一：上传EXCEL文件</h1>
          </el-col>
          <el-col :span="12">
            <p>[导入帮助]</p>
          </el-col>
        </el-row>
        <el-row class="tip">
          <el-col :span="24">
            <p>你要从何处导入数据，请选择导入的Excel文件和sheet表</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="form_in">
            <span>Excel文件：</span>
            <el-upload
              class="upload-demo excel_up"
              action="/api/common/upload/index/"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="1"
              :on-success="up_loader"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip excel_tip">注：只能上传excel文件</div>
            </el-upload>
          </el-col>
          <el-col :span="24" class="form_in">
            <span>选择Sheet表:</span>
            <el-select
              v-model="form_sel"
              placeholder="请选择"
              @change="sel_sheet_num = sheet_option[form_sel]['number']"
              style="width: 200px"
            >
              <el-option
                v-for="(item,y) in sheet_option"
                :key="y"
                :label="item.sheet"
                :value="item.sheet"
              ></el-option>
            </el-select>
            <p style="padding-left: 10px">表格数量:{{sel_sheet_num}}条</p>
          </el-col>
          <el-col :span="24" class="form_teach">
            <h3>导入步骤</h3>
            <p>第一步：上传存储有运单资料的Excel文件;【你可以直接上传Excel文件】</p>
            <p>第二步：设置Excel里的列与系统中的列的对应关系；</p>
            <p>第三步：开始导入</p>
          </el-col>
          <el-col :span="24" style="padding: 10px 0">
            <el-alert
              title
              type="error"
              description="全新的客户导入功能，无需任何模版，系统自动匹配关系，数据内容直接导入，使用更加、方便、快捷、智能。"
            ></el-alert>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="dia_btn">
            <el-button @click="upload_show = false">取 消</el-button>
            <el-button type="primary" @click="one_next_step">下一步</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-show="two_show">
        <el-row class="relation">
          <el-col :span="12" style="display: flex;align-items: center">
            <h1>步骤二：【个人客户】创建对应关系</h1>
            <p style="padding-left: 50px;color: #435e71;">建立系统列与Excel列的对应关系</p>
          </el-col>
          <el-col :span="12">
            <p>[导入帮助]</p>
          </el-col>
        </el-row>
        <el-row class="tip">
          <el-col :span="24">
            <p>
              客户信息
              <span style="color: red ;padding-left: 20px">*号为必填项</span>
            </p>
          </el-col>
        </el-row>
        <el-row class="two_table_title">
          <el-col :span="12" style="border-right: 1px solid #eeeeee">系统列</el-col>
          <el-col :span="12">Excel列</el-col>
        </el-row>
        <el-row class="two_table_body" v-for="(item,m) in two_list" :key="m">
          <el-col :span="12">{{item.title}}</el-col>
          <el-col :span="12">
            <el-select v-model="item.con" placeholder="请选择" style="width: 200px">
              <el-option v-for="(item,y) in two_options" :key="y" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="dia_btn">
            <el-button @click="upload_show = false">取 消</el-button>
            <el-button type="primary" @click="two_pre_step">上一步</el-button>
            <el-button type="primary" @click="two_next_step">下一步</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </DIV>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import axios from "axios";
import qs from "qs";
var md5 = require("md5");
export default {
  name: "user_import",
  data() {
    return {
      two_list: [],
      two_options: [],
      sel_sheet_num: "0", //表格数量
      sheet_option: {
        请选择: {
          number: "0",
          sheet: "请选择"
        }
      },
      form_sel: "",
      fileList: [],
      two_show: false,
      one_show: true,
      loading: false
    };
  },
  components: {
    HeadTitle
  },
  methods: {
    two_pre_step() {
      //第二个窗口上一步
      this.one_show = true;
      this.two_show = false;
    },
    // two_next_step() {
    //   //第二个窗口下一步
    //   var obj = {};
    //   this.two_list.forEach(arg => {
    //     var k = arg.iden;
    //     var v = arg.con;
    //     obj[k] = v;
    //   });
    //   obj.sheet = this.form_sel;
    //   obj.filename = this.file_url;
    //   this.$api.getShops.import_excel_order(obj).then(res => {
    //     if (res.data.code == 200) {
    //       this.$fnc.alertSuccess("修改成功");
    //       this.one_show = true;
    //       this.two_show = false;
    //     } else {
    //       this.$fnc.alertError(res.data.result);
    //     }
    //   });
    // },
    two_next_step() {
      //第二个窗口下一步
      var obj = {};
      this.two_list.forEach(arg => {
        var k = arg.iden;
        var v = arg.con;
        obj[k] = v;
      });
      obj.sheet = this.form_sel;
      obj.filename = this.file_url;
      
      var params = JSON.parse(JSON.stringify(obj));
      var uid = localStorage.getItem("adminuid") || "";
      var time = parseInt(new Date().getTime() / 1000) + "";
      var admin_key = localStorage.getItem("admin_key") || "";
      var str = qs.stringify(params);
      var url = "";
      if (str == "") {
        url =
          "admin_key=" +
          admin_key +
          "&headuid=" +
          uid +
          "&timestamp=" +
          time +
          "&meid=" +
          "" +
          "&extra=" +
          "";
      } else {
        url =
          str +
          "&admin_key=" +
          admin_key +
          "&headuid=" +
          uid +
          "&timestamp=" +
          time +
          "&meid=" +
          "" +
          "&extra=" +
          "";
      }
      var arr = url.split("&");
      for (var i in arr) {
        if (arr[i].indexOf("%") >= 0) {
          arr[i] = decodeURIComponent(arr[i]);
        }
      }
      var urlStr = arr.sort().join("&");
      params.sign = md5("@" + urlStr + "@");
      axios.post("/api/admin/export_order/excel_in", qs.stringify(params), {
        headers: {
          headuid: uid,
          timestamp: time,
          meid: "",
          extra: ""
        },
        timeout: 300000
      }).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.one_show = true;
          this.two_show = false;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    get_two_title() {
      //第二步左侧列表
      this.loading = true;
      this.$api.getShops.get_excel_order_options({}).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.two_list = res.data.result;
        } else {
          this.loading = false;
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    get_two_option() {
      // //第二步左侧列表，自定义标题绑定下拉列表选项
      var obj = {
        sheet: this.form_sel,
        filename: this.file_url
      };
      this.loading = true;
      this.$api.getUser.get_sel_options(obj).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.two_options = res.data.result;
        } else {
          this.loading = false;
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    one_next_step() {
      //第一个窗口下一步
      this.one_show = false;
      this.two_show = true;
      this.get_two_option(); //下拉列表选项
      this.get_two_title();
      console.log(this.sel_sheet_num);
    },
    get_sheet_num(file) {
      // 上传表的sheet数 和 每个sheet的行数

      this.$api.getUser.get_sheet({ filename: file }).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.sheet_option = res.data.result;
        } else {
          this.loading = false;
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    up_loader(response) {
      //上传文件成功
      this.loading = true;
      if (response.code == 200) {
        this.loading = false;
        this.file_url = response.result;
        this.get_sheet_num(this.file_url);
      } else {
        this.loading = false;
        this.file_url = "";
        this.fileList = [];
        this.$fnc.alertError(response.code_desc, response.result);
      }
    },
    handleRemove(file, fileList) {},

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
<style  scoped>
.excel_in {
  width: 96%;
  margin: 0 auto;
  padding: 30px 0;
}
.relation {
  border-bottom: 1px solid #eeeeee;
  height: 50px;
}
.relation h1 {
  text-align: left;
}
.relation p {
  text-align: right;
  font-size: 14px;
  color: #999999;
}
.tip {
  border-bottom: 1px solid #eeeeee;
  height: 60px;
  font-size: 14px;
  line-height: 60px;
  text-align: left;
}
.form_in {
  height: 60px;
  display: flex;
  line-height: 60px;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.form_in span {
  width: 10%;
}
.excel_up {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  line-height: 60px;
  margin-top: 0;
}
.excel_tip {
  margin-top: 0;
  padding-left: 10px;
}
.excel_up ul li {
  margin-top: 0;
}
.el-upload-list {
}
.excel_up .el-upload-list__item:first-child {
  margin-top: 0;
}
.form_teach {
  height: 200px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.form_teach h3 {
  line-height: 50px;
}
.form_teach p {
  line-height: 26px;
}
.two_table_title {
  background-color: #f5f5f5;
  height: 50px;
  line-height: 50px;
}
.two_table_body {
  border-bottom: 1px solid #eeeeee;
}
.two_table_body .el-col {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 50px;
}
.dia_btn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
}
</style>
